<template>
  <div>
    <p>课程列表</p>
    <div class="main">
      <ul v-for="item in myarr" :key="item.id">
        <li ref="arr">ID:{{ item.id }}</li>
        <li>
          <input
            type="checkbox"
            :checked="item.checked"
            @click="!item.checked"
          />
        </li>
        <li class="imgs">
          <img
            :src="item.url"
            alt=""
            style="display: inline-block; width: 100%"
          />
        </li>
        <li>信息: {{ item.info }}</li>
        <li>报名费: {{ item.money }}￥</li>
        <li>销量: {{ item.sale }}</li>
        <li :class="item.name">上传人: {{ item.name }}</li>
        <li>上传时间: {{ item.time }}</li>
        <li :class="item.id" class="button">
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(item)"
            >编辑</el-button
          >
          <el-button
            type="info"
            icon="el-icon-delete"
            @click="handleDelete"
            id="del"
            >删除</el-button
          >
        </li>
      </ul>
    </div>
    <input type="checkbox" /> 全选
    <span @click="deletesomehandler" id="som">批量删除</span>
  </div>
</template>

<script>
import { deleteByIdApis, batchDeleteApis } from "../../../api/studentApi";
export default {
  props: ["myarr"],
  data() {
    return {};
  },

  methods: {
    handleEdit(e) {
      var id = e.target.parentElement.className;
      this.$emit("openDialog", id);
    },
    handleDelete(e) {
      // console.log(typeof(e.target.parentElement.className));
      var id = e.target.parentElement.className;
      // console.log(typeof(id));
      if (e.target.id !== "del") return;
      deleteByIdApis({ id: id }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$emit("resetTable");
        }
      });
    },
    deletesomehandler(e) {
      if (e.target.id !== "som") return;
      // console.log(this.myarr);
      var idArr = this.myarr
        .filter((item) => {
          return item.checked == true;
        })
        .map((item) => {
          return item.id;
        });
      // console.log(idArr);
      var ids = idArr.join(",");
      // console.log(ids);
      batchDeleteApis({ ids: ids }).then((res) => {
        // console.log(res)
        if (res.code == 200) {
          this.$emit("resetTable");
        }
      });
    },
  },
};
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.main {
  margin: 10px 20px 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
}
p {
  height: 56px;
  /* margin-left:38px; */
  line-height: 56px;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 0 38px;
}
ul {
  padding: 8px 12px;
  list-style: none;
  width: 350px;
  height: 450px;
  background-color: white;
  li {
    line-height: 40px;
  }
}
ul > li:nth-child(1),
ul > li:nth-child(2) {
  display: inline-block;
}
ul > li:nth-child(2) {
  float: right;
  margin-top: -3px;
}
input {
  margin-left: 50px;
}
.button{
  display: flex;
  justify-content: space-around;
  padding-top: 5px;
  .el-button{
    padding:8px 14px;
    text-align: center;
  }
}
.imgs {
  height: 150px;
  width: 100%;
  overflow: hidden;
}
</style>